<template>
    <div class="body1">
        <div class="no-print el-button-print">
            <el-button @click="exportPDF">导出为pdf</el-button>
        </div>
        <div class="body2" id="pdfDom" :class="{ 'pdf-export': isPdfExport }">
            <div class="title">
                <div class="biaotididian">{{ agencyName }}</div>
                <div class="biaoti">举 报 记 录</div>
            </div>
            <table class="tableStyle">
                <colgroup>
                    <col width="13%">
                    <col width="5%">
                    <col width="20%">
                    <col width="18%">
                    <col width="15%">
                    <col width="24%">
                </colgroup>
                <tbody>
                    <tr>
                        <td style="text-align: center">举报类别</td>
                        <td colspan="5" style="font-family: 仿宋,serif;font-size: 18px">
                            <input type="checkbox" value="来信" v-model="form.a1" />来信
                            <input type="checkbox" value="来电" v-model="form.a2" />来电
                            <input type="checkbox" value="来访" v-model="form.a3" />来访
                            <input type="checkbox" value="其他" v-model="form.a4" />其他
                            <input v-model="form.other" :resize="'none'" autosize maxlength="14" class="inputStyle"
                                style="width: 50%;font-family: 仿宋;font-size: 5mm;" type="textarea" ref="inputRef6">
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center">举报时间</td>
                        <td colspan="5">
                            <editable-textarea :text="form.time1" param-type="YYYY-MM-DD HH:mm1"
                                @send-to-parent="receiveFromChild"></editable-textarea>
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align: center" rowspan="8">举报人</td>
                        <td style="text-align: center" rowspan="4">个人</td>
                        <td style="text-align: center">姓&nbsp;&nbsp;&nbsp;&nbsp;名</td>
                        <td>
                            <el-input v-model="form.name" :resize="'none'" autosize class="areaInputStyle" maxlength="6"
                                type="textarea" ref="inputRef8">
                            </el-input>
                        </td>
                        <td style="text-align: center">联系电话</td>
                        <td>
                            <el-input v-model="form.phoneNumber" :resize="'none'" autosize class="areaInputStyle"
                                maxlength="16" oninput="this.value = this.value.replace(/[^a-zA-Z0-9_-]/g, '')"
                                placeholder="请输入数字" type="textarea" ref="inputRef8">
                            </el-input>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center">性&nbsp;&nbsp;&nbsp;&nbsp;别</td>
                        <td>
                            <el-input v-model="form.sex" :resize="'none'" autosize class="areaInputStyle" maxlength="1"
                                type="textarea" ref="inputRef8">
                            </el-input>
                        </td>
                        <td style="text-align: center">出生年月</td>
                        <td>
                            <editable-textarea :text="form.time2" param-type="YYYYMMDD2"
                                @send-to-parent="receiveFromChild"></editable-textarea>
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 50px;text-align: center">身份证或其他有效证件号码</td>
                        <td colspan="3">
                            <el-input v-model="form.cardId" :resize="'none'" autosize class="areaInputStyle"
                                maxlength="38" type="textarea" ref="inputRef8">
                            </el-input>
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 50px;text-align: center">住址或工作单位</td>
                        <td colspan="3">
                            <el-input v-model="form.address" :resize="'none'" autosize class="areaInputStyle"
                                maxlength="38" type="textarea" ref="inputRef8">
                            </el-input>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center" rowspan="4">法人和其他组织</td>
                        <td style="text-align: center">名&nbsp;&nbsp;&nbsp;&nbsp;称</td>
                        <td colspan="3">
                            <privy-info-select-return-array v-model="form.unitName" :isTable="true" maxLength="19"
                                return-fields="A" :return-array-template="[
                                    { name: 'companyLicense', field: 'B' },
                                    { name: 'legalPerson', field: 'C' },
                                    { name: 'legalPersonPosition', field: 'D' },
                                    { name: 'companyAddress', field: 'E' },
                                    { name: 'legalPersonPhone', field: 'H' },
                                ]" @select="selectUnitUpdateData">
                            </privy-info-select-return-array>
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 50px;text-align: center">法定代表人或负责人</td>
                        <td>
                            <el-input v-model="form.legalPerson" :resize="'none'" autosize class="areaInputStyle"
                                maxlength="12" type="textarea" ref="inputRef8">
                            </el-input>
                        </td>
                        <td style="text-align: center">职&nbsp;&nbsp;&nbsp;&nbsp;务</td>
                        <td>
                            <el-input v-model="form.legalPersonPosition" :resize="'none'" autosize
                                class="areaInputStyle" maxlength="16" type="textarea" ref="inputRef8">
                            </el-input>
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 50px;text-align: center">统一社会信用代码</td>
                        <td>
                            <el-input v-model="form.companyLicense" :resize="'none'" autosize class="areaInputStyle"
                                maxlength="24" oninput="this.value = this.value.replace(/[^a-zA-Z0-9_-]/g, '')"
                                type="textarea" ref="inputRef8">
                            </el-input>
                        </td>
                        <td style="text-align: center">联系电话</td>
                        <td>
                            <el-input v-model="form.legalPersonPhone" :resize="'none'" autosize class="areaInputStyle"
                                maxlength="16" type="textarea" ref="inputRef8">
                            </el-input>
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 50px;text-align: center">住&nbsp;&nbsp;&nbsp;&nbsp;所</td>
                        <td colspan="3">
                            <el-input v-model="form.companyAddress" :resize="'none'" autosize class="areaInputStyle"
                                maxlength="38" type="textarea" ref="inputRef8">
                            </el-input>
                        </td>
                    </tr>

                    <tr style=" height:195px">
                        <td style="text-align: center">举报内容</td>
                        <td colspan="5" style="text-align: left;vertical-align: top; position: relative;">
                            <el-input type="textarea" v-model="form.a30" :rows="a30Config.maxLines"
                                @keydown.native="handleKeyDown('a30', $event)" @input="handleInput('a30', $event)"
                                @paste.native="handlePaste('a30', $event)" class="el-textarea-hidden"
                                style="white-space: pre;overflow-x: auto;font-family: monospace;" wrap="soft" />
                            <div
                                style="position: absolute; bottom: 10px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: flex-end; margin-top: 20px;">
                                <div style="display: flex; align-items: flex-end;">
                                    接报人签名：
                                    <SignatureField label="签名1" sign-type="sign1" :img-url="form.img1"
                                        @update:imgUrl="form.img1 = $event" />
                                </div>
                                <div>
                                    <editable-textarea :text="form.time3" param-type="YYYYMMDD3"
                                        @send-to-parent="receiveFromChild"></editable-textarea>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr style="height:150px">
                        <td style="text-align: center">受理机构意&nbsp;&nbsp;&nbsp;&nbsp;见</td>
                        <td colspan="5" style="text-align: left;vertical-align: top; position: relative;">
                            <el-input type="textarea" v-model="form.a31" :rows="a31Config.maxLines"
                                @keydown.native="handleKeyDown('a31', $event)" @input="handleInput('a31', $event)"
                                @paste.native="handlePaste('a31', $event)" class="el-textarea-hidden"
                                style="white-space: pre;overflow-x: auto;font-family: monospace;" wrap="soft" />
                            <div
                                style="position: absolute; bottom: 10px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: flex-end; margin-top: 20px;">
                                <div style="display: flex; align-items: flex-end;">
                                    负责人签名：
                                    <SignatureField label="签名2" sign-type="sign2" :img-url="form.img2"
                                        @update:imgUrl="form.img2 = $event" />
                                </div>
                                <div>
                                    <editable-textarea :text="form.time2" param-type="YYYYMMDD2"
                                        @send-to-parent="receiveFromChild"></editable-textarea>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr style="height:75px">
                        <td style="text-align: center">备&nbsp;&nbsp;&nbsp;&nbsp;注</td>
                        <td colspan="5" style="text-align: left;vertical-align: top; position: relative;">
                            <el-input type="textarea" v-model="form.a32" :rows="a32Config.maxLines"
                                @keydown.native="handleKeyDown('a32', $event)" @input="handleInput('a32', $event)"
                                @paste.native="handlePaste('a32', $event)" class="el-textarea-hidden"
                                style="white-space: pre;overflow-x: auto;font-family: monospace;" wrap="soft" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <div style="margin-top: 2px; margin-left: 20px">
                <span>注：受理单位应当保守秘密</span>
            </div>
        </div>
    </div>
</template>

<script>
import EditableTextarea from "@/views/template/EditableTextarea";
import { agencyName, sealName } from "../../utils/publicName.js"
import PrivyInfoSelectReturnArray from "@/views/template/PrivyInfoSelectReturnArray";
import SignatureField from "@/views/template/SignatureField";
import { createInputLimiter } from '@/utils/limitInput';

export default {
    name: "举报记录",
    components: {
        EditableTextarea,
        SignatureField,
        PrivyInfoSelectReturnArray,
    },
    data() {
        return {
            agencyName: agencyName,
            sealName: sealName,
            form: {},
            isPdfExport: false,// 控制打印样式
            a30Config: {
                maxLines: 6,
                charsPerLine: 28 * 2,
                maxLength: 6 * 28 * 2,
                inputLimiter: null,
                displayText: ''
            },
            a31Config: {
                maxLines: 4,
                charsPerLine: 28 * 2,
                maxLength: 4 * 28 * 2,
                inputLimiter: null,
                displayText: ''
            },
            a32Config: {
                maxLines: 3,
                charsPerLine: 28 * 2,
                maxLength: 3 * 28 * 2,
                inputLimiter: null,
                displayText: ''
            },
        };
    },
    created() {
        //调用父页面函数获取文书数据
        window.parent.getTemplateData((data) => {
            this.form = data;
        })
        //将方法暴露在初始化加载中
        window.postForm = () => {
            this.postForm();
        }
        this.a30Config.inputLimiter = createInputLimiter(this, {
            maxLines: this.a30Config.maxLines,
            charsPerLine: this.a30Config.charsPerLine,
            maxLength: this.a30Config.maxLength,
            propName: 'form.a30'
        });
        this.a31Config.inputLimiter = createInputLimiter(this, {
            maxLines: this.a31Config.maxLines,
            charsPerLine: this.a31Config.charsPerLine,
            maxLength: this.a31Config.maxLength,
            propName: 'form.a31'
        });
        this.a32Config.inputLimiter = createInputLimiter(this, {
            maxLines: this.a32Config.maxLines,
            charsPerLine: this.a32Config.charsPerLine,
            maxLength: this.a32Config.maxLength,
            propName: 'form.a32'
        });
    },
    mounted() {
        window.parent.changeTemplateDow();
    },
    methods: {
        getConfigName(field) {
            switch (field) {
                case 'a30':
                    return this.a30Config;
                case 'a31':
                    return this.a31Config;
                case 'a32':
                    return this.a32Config;
            }
        },
        handleKeyDown(field, e) {
            const config = this.getConfigName(field);
            config.inputLimiter.handleKeyDown(e);
        },
        handleInput(field, value) {
            const config = this.getConfigName(field);
            this.form[field] = config.inputLimiter.handleInput(value);
        },
        handlePaste(field, e) {
            const config = this.getConfigName(field);
            config.inputLimiter.handlePaste(e);
        },
        // 导出为pdf
        exportPDF() {
            this.savePDF()
                .then((blob) => {
                    const blobUrl = URL.createObjectURL(blob);

                    // 先预览
                    const previewWindow = window.open(blobUrl, '_blank');

                    // 自动下载
                    const fileName = `举报记录.pdf`;
                    const downloadLink = document.createElement('a');
                    downloadLink.href = blobUrl;
                    downloadLink.download = fileName;
                    document.body.appendChild(downloadLink);
                    downloadLink.click();
                    document.body.removeChild(downloadLink);

                    // 监听预览窗口关闭后释放内存
                    if (previewWindow) {
                        const timer = setInterval(() => {
                            if (previewWindow.closed) {
                                clearInterval(timer);
                                URL.revokeObjectURL(blobUrl);
                            }
                        }, 1000);
                    } else {
                        setTimeout(() => URL.revokeObjectURL(blobUrl), 10000); // 兜底释放
                    }
                })
                .catch(error => {
                    console.error('导出PDF出错:', error);
                    alert('导出失败，请重试或联系管理员');
                });
        },
        savePDF() {
            this.isPdfExport = true; // 激活PDF样式
            return new Promise((resolve, reject) => {
                this.$nextTick(() => {
                    import('html2pdf.js').then((module) => {
                        const html2pdf = module.default;

                        //获取所有需要替换的 el-input
                        const elInputs = document.querySelectorAll('.el-input__inner, .el-textarea__inner');

                        //存储原始元素和它们的父节点，方便后续恢复
                        const originalElements = [];

                        elInputs.forEach((input) => {
                            const div = document.createElement('div');
                            div.style.whiteSpace = 'pre-wrap'; // 保留换行
                            div.style.fontFamily = '仿宋';
                            div.style.fontSize = '5mm';
                            div.textContent = input.value; // 保留原内容（自动处理 \n 换行）
                            div.style.lineHeight = '1.3';

                            // 替换 el-input，并存储原始元素
                            originalElements.push({
                                parent: input.parentNode,
                                original: input,
                                replacement: div,
                            });
                            input.parentNode.replaceChild(div, input);
                        });

                        // 配置选项
                        const opt = {
                            margin: 0,
                            image: {
                                type: 'jpeg',
                                quality: 0.98
                            },
                            html2canvas: {
                                scale: 2,
                                logging: false,
                                useCORS: true
                            },
                            jsPDF: {
                                unit: 'mm',
                                format: 'a4',
                                orientation: 'portrait'
                            }
                        };

                        const element = document.getElementById('pdfDom');

                        // 生成PDF Blob对象
                        html2pdf()
                            .set(opt)
                            .from(element)
                            .toPdf()
                            .get('pdf')
                            .then((pdf) => {
                                const blob = pdf.output('blob');

                                resolve(blob); // 返回Blob对象
                            })
                            .catch((error) => {
                                reject(error);
                            })
                            .finally(() => {
                                this.isPdfExport = false; // 恢复原始样式
                                // 恢复原始input
                                originalElements.forEach(({ parent, original, replacement }) => {
                                    parent.replaceChild(original, replacement);
                                });
                            });
                    }).catch((error) => {
                        reject(error);
                        this.isPdfExport = false;
                        originalElements.forEach(({ parent, original, replacement }) => {
                            parent.replaceChild(original, replacement);
                        });
                    });
                });
            });
        },
        //父页面提交按钮将调用此方法，此方法将文书数据回传到父页面的请求方法中
        postForm() {
            this.savePDF()
                .then((blob) => {


                    // 创建FormData并添加文件
                    const formData = new FormData();
                    formData.append('file', blob, '举报记录.pdf');

                    window.parent.postTemplateDate(this.form, formData);
                })
                .catch(error => {
                    console.error('整个保存PDF出错:', error);
                });
        },
        //选择日期时间
        receiveFromChild(data, type) {
            const TypeMap = {
                'YYYY-MM-DD HH:mm1': 'time1',
                'YYYYMMDD2': 'time2',
                'YYYYMMDD3': 'time3',
                'YYYYMMDD4': 'time4',
            };
            if (TypeMap[type]) {
                this.form[TypeMap[type]] = data;
            }
        },
        // 选择单位
        selectUnitUpdateData(data) {
            data.forEach(item => {
                this.form[item.name] = item.value;
            })
        },
    }
}
</script>

<style scoped>
:deep(.el-button-print .el-button) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto;
    min-width: 100px;
    height: auto;
    padding: 8px 15px;
    background: #fff !important;
    color: #000 !important;
    border: none;
}

:deep(.el-textarea__inner) {
    box-shadow: 0 0 0 0;
    color: black;
    padding: 0;
    font-family: "仿宋", serif;
    font-size: 5mm;
    overflow-y: hidden;
    line-height: 1.3;
}

:deep(.el-textarea-hidden .el-textarea__inner) {
    box-shadow: 0 0 0 0;
    color: black;
    padding: 0;
    font-family: "仿宋", serif;
    font-size: 5mm;
    overflow-y: hidden !important;
    resize: none !important;
    height: auto !important;
}

.input-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.inputStyleNoLine {
    border: none;
    outline: none;
    padding: 0px;
}

.typeSpan {
    cursor: pointer;
    font-size: 5mm;
}
</style>
